<template>
  <div class="Professional-container">
    <el-input
      v-model="inputValue"
      placeholder="请输入编号或名称"
      size="large"
      :suffix-icon="Search"
      @input="searchTeam"
    />
    <div style="overflow: auto; height: calc(100% - 122px)">
      <!-- 支队信息 -->
      <div v-for="item in teamList" :key="item.id" class="card-container">
        <el-card
          class="box-card"
          :class="{ 'active-color': activeIndex === item.id }"
          @click="clickHandler(item.id)"
        >
          <template #header>
            <div class="card-header" @click="activeWarehouseClick(item)">
              <span>
                <img src="@/assets/image/common/house-icon.png" alt="" />
                {{ item.mc }}
              </span>

              <div class="button" text>
                <img
                  style="width: 30px"
                  src="@/assets/image/common/edit-icon.png"
                  title="编辑企业专职队"
                  @click="ProfessionalHandler(item)"
                />
                <img
                  v-if="item.sfbh === 0"
                  style="width: 30px"
                  src="@/assets/image/common/map-add.png"
                  title="点击开始标注"
                  @click.stop="mapAdd(item)"
                />
                <img
                  v-else
                  style="width: 30px"
                  src="@/assets/image/common/map-delete.png"
                  title="点击删除标注"
                  @click.stop="mapDelete(item)"
                />
                <img
                  style="width: 30px"
                  src="@/assets/image/common/delete-icon.png"
                  title="删除企业专职队"
                  @click="ProfessionalDelete(item)"
                />
              </div>
            </div>
          </template>

          <div
            v-for="(obj, index) in item.qyzzdViewInfoList"
            :key="index"
            class="text item"
            :class="{ 'active-FireCar': activeFireCarIndex === index && activeIndex === item.id }"
            @click="activeFireCarClick(index)"
          >
            <div
              v-if="obj.mc && obj.mc.length + obj.lx.length < 15"
              v-html="`${obj.mc}-${obj.lx}`"
            ></div>
            <div
              v-if="obj.mc && obj.mc.length + obj.lx.length > 15"
              :title="`${obj.mc}-${obj.lx}`"
              class="cartext"
              v-html="`${obj.mc}-${obj.lx}`"
            ></div>
            <div>
              <img
                style="width: 30px"
                src="@/assets/image/common/edit-icon.png"
                title="编辑消防车辆"
                @click="fireCarHandler(obj, 1, item)"
              />
              <img
                style="width: 30px"
                src="@/assets/image/common/delete-icon.png"
                title="删除消防车辆"
                @click="fireCarDelete(obj)"
              />
            </div>
          </div>

          <!-- 新增消防车辆 -->
          <div class="addFireCar-button" @click="fireCarHandler(item, 2, item)">
            <i></i>
            <span>新增消防车辆</span>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 新增企业专职队 -->
    <div class="card-footer" @click="ProfessionalHandler">
      <i></i>
      <span>新增企业专职队</span>
    </div>

    <!-- 新增/编辑企业专职队弹窗 -->
    <AddProfessional
      v-if="showAddProfessional"
      ref="dthhtrthr"
      :qyzzd-id="qyzzdId"
      @closeProfessional="closeProfessional"
      @uploadHandler="uploadHandler"
    />

    <!-- 新增消防车辆弹窗 -->
    <AddFireCar
      v-if="showAddFireCar"
      :qyzzd-id="qyzzdId"
      @uploadCarList="uploadCarList"
      @closeFireCar="closeFireCar"
    />
  </div>
  <div v-if="isShowHomeBack" class="collectionBack">
    <div style="font-size: 40px; text-align: center; padding-top: 30px; margin-bottom: 20px">
      <el-icon>
        <InfoFilled />
      </el-icon>
      是否删除数据？
    </div>
    <div style="text-align: center; margin-top: 40px">
      <el-button
        style="background: #909399; color: #fff; border: 1px solid #909399"
        @click="cellectcancelClick"
        >取消</el-button
      >
      <el-button style="color: #000" type="primary" @click="cellectddetermineClick">确定</el-button>
    </div>
  </div>
  <div v-if="isShowCarBack" class="collectionBack">
    <div style="font-size: 40px; text-align: center; padding-top: 30px; margin-bottom: 20px">
      <el-icon>
        <InfoFilled />
      </el-icon>
      是否删除数据？
    </div>
    <div style="text-align: center; margin-top: 40px">
      <el-button
        style="background: #909399; color: #fff; border: 1px solid #909399"
        @click="carcancelClick"
        >取消</el-button
      >
      <el-button style="color: #000" type="primary" @click="CARdetermineClick">确定</el-button>
    </div>
  </div>
  <SecondaryConfirm @secondaryConfirmSave="secondaryConfirmSave" />
</template>

<script setup lang="ts">
import { Search, DeleteFilled, Edit, CirclePlusFilled, House } from '@element-plus/icons-vue'
import AddFireCar from './AddFireCar.vue'
import AddProfessional from './AddProfessional.vue'
import { featureClick, delMapFactorInfo } from '@/utils/common/index'
import qyzzd_icon from '@/assets/image/mapIcon/qyzzd-icon.png'
import { ElMessage, ElMessageBox } from 'element-plus'
import { flyToLxOrCjid } from '@/utils/common/index'
import { InfoFilled } from '@element-plus/icons-vue'
import SecondaryConfirm from '@/components/SecondaryConfirm/index.vue'
import {
  queryProfessionalInfo,
  AddProfessionalInfo,
  quyerFireCarInfo,
  AddFireCarInfo,
  queryFzrxxInfo,
  queryTeamByKey,
} from '@/service/api/ProfessionalTeam'
import { useChemicalStore } from '@/store'
const chemicalStore = useChemicalStore()
import { useProfessionalStore } from '@/store'
import func from '~/vue-temp/vue-editor-bridge'
const data = useProfessionalStore()
let timer = null //做防抖
const inputValue = ref()

/** 企业专职队上图 */
const mapAdd = (item: any) => {
  featureClick({
    id: item.id,
    parentName: item.id,
    MapFactorType: 'overlay',
    MapFactorName: '企业专职队',
    bzlx: '32',
    text: item.mc,
    mapIconUrl: qyzzd_icon,
    attribute: item,
  })
}

/** 删除企业专职队地图要素 */
const mapDelete = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除该企业专职队地图要素',
    type: 'delMapData',
    typeCode: 'cg',
    data: item,
  }
}
const isShowHomeBack = ref(false)
const isShowCarBack = ref(false)
const teamList = ref([])
const dthhtrthr = ref()
const qyzzdId = ref('')
const showAddProfessional = ref(false)
const showAddFireCar = ref(false)
const qyzzditem = ref()
const carItem = ref()
const activeFireCarIndex = ref(0)
const activeFireCarClick = (index) => {
  activeFireCarIndex.value = index
  // console.log(activeFireCarIndex.value)
}

const activeIndex = ref(0)
const clickHandler = (id) => {
  activeIndex.value = id
  // activeFireCarIndex.value = 0
  // console.log(tabIndex)
}
const handleClose = (done: () => void) => {
  isShowHomeBack.value = false
}
const activeWarehouseClick = (item: any) => {
  flyToLxOrCjid('overlay', item.id)
}
//显示新增/编辑企业专职队
const ProfessionalHandler = async (item: any, index: any) => {
  qyzzdId.value = item.id
  Object.keys(data.basicInfoData).map((key) => delete data.basicInfoData[key])
  //有无企业id，有就编辑专职队，同时回写数据（加判断）
  // console.log(item.id, '111')
  if (item.id) {
    // debugger
    const res = await queryProfessionalInfo({ key: item.id })

    res.sfbh = item.sfbh

    data.basicInfoData = res
  }
  // const resvalue = await queryFzrxxInfo({ key: chemicalStore.qyInfo.id,ssid:item.id })
  // debugger
  // 没有就直接新增
  showAddProfessional.value = true

  nextTick(() => {
    dthhtrthr.value.clickFileHandle()
  })
}
//罐区/储罐 删除数据/删除地图要素 确认
const secondaryConfirmSave = (type: any, typeCode: any) => {
  const item: any = chemicalStore.secondaryConfirmInfo.data

  //删除地图要素数据
  if (type === 'delMapData') {
    if (typeCode === 'gq') {
      delMapFactorInfo(item, 'scrollWall')
    } else if (typeCode === 'cg') {
      delMapFactorInfo(item, 'overlay')
    }
  }
  //删除数据
  else if (type === 'delData') {
    if (typeCode === 'gq') {
      const params = { id: item.id, qyid: item.qyid, sfyx: 0 }
      insertOrUpdateGqxx(params)
        .then((res: any) => {
          emitter.emit('tabLeft_refreshData') //更新左侧tab统计数量

          //删除地图要素
          window.GScrollWall.removeByName(item.id)
          window.GOverlay.removeByPatName(item.id)

          ElMessage.success('罐区删除成功')
          loadTankFarmData()
        })
        .catch((err: any) => {
          ElMessage.error('罐区删除失败')
        })
    } else if (typeCode === 'cg') {
      const params = { id: item.id, qyid: item.qyid, sfyx: 0 }
      insertOrUpdateCgxx(params)
        .then((res: any) => {
          //删除地图要素
          window.GOverlay.removeByName(item.id)

          ElMessage.success('储罐删除成功')
          loadTankFarmData()
        })
        .catch((err: any) => {
          ElMessage.error('储罐删除失败')
        })
    }
  }
}
const uploadHandler = async () => {
  const res = await queryTeamByKey({
    key: inputValue.value,
    qyid: chemicalStore.qyInfo.id,
  })
  // console.log(res);

  teamList.value = res
  console.log(teamList.value)
}

function uploadCarList() {
  uploadHandler()
}
//根据企业id删除企业专职队
const ProfessionalDelete = async (item: any) => {
  qyzzditem.value = item
  isShowHomeBack.value = true
}
function cellectcancelClick() {
  isShowHomeBack.value = false
}
function cellectddetermineClick() {
  delMapFactorInfo(qyzzditem.value, 'overlay')
  // const res = await queryProfessionalInfo({ key: id })
  // console.log(res)

  // Object.keys(res).map((key) => delete res[key])
  AddProfessionalInfo({
    sfyx: 0,
    id: qyzzditem.value.id,
    qyid: chemicalStore.qyInfo.id,
  }).then(async () => {
    const res = await queryTeamByKey({
      key: inputValue.value,
      qyid: chemicalStore.qyInfo.id,
    })
    teamList.value = res
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    isShowHomeBack.value = false
  })
}
//新增(编辑)消防车
const fireCarHandler = async (obj: any, type: any, item: any) => {
  qyzzdId.value = item.id
  showAddFireCar.value = false
  //需添加判断：新增还是编辑，有id就是编辑
  if (type == 1) {
    if (obj.id) {
      // debugger
      const res = await quyerFireCarInfo({ key: obj.id })
      data.fireCarInfo = res
    }
  }
  showAddFireCar.value = true
}
function carcancelClick() {
  isShowCarBack.value = false
}
//删除当前消防车
const fireCarDelete = (obj) => {
  carItem.value = obj
  isShowCarBack.value = true
  // const res = await quyerFireCarInfo({ key: chemicalStore.qyInfo.id })
  // //  获取当前消防车辆信息，清空该字段，并重新保存车辆信息
  // Object.keys(res).map((key) => delete res[key])
  // AddFireCarInfo({ ...res, sfyx: 0 })
}
const CARdetermineClick = async () => {
  await AddFireCarInfo({ sfyx: 0, id: carItem.value.id, qyid: chemicalStore.qyInfo.id })
  uploadHandler()
  ElMessage({
    type: 'success',
    message: '删除成功',
  })
  isShowCarBack.value = false
}
// 关闭新增专职队弹窗
const closeProfessional = (bool) => {
  console.log(bool)
  showAddProfessional.value = bool
}

//关闭新增消防车弹窗
const closeFireCar = (bool) => {
  showAddFireCar.value = bool
}

//根据关键字查询企业专职队
const searchTeam = (value: any) => {
  clearTimeout(timer)
  timer = setTimeout(async () => {
    const res = await queryTeamByKey({
      key: inputValue.value,
      qyid: chemicalStore.qyInfo.id,
    })
    teamList.value = res

    console.log(teamList)
  }, 500)
}

onMounted(() => {
  searchTeam()
})
</script>
//
<style lang="less">
// .messageBox .el-message-box__content {
//   height: 50px;
// }
// .el-message-box__message p {
//   color: #fff;
//   font-size: 20px;
// }
// .messageBox .el-message-box__btns {
//   .el-button {
//     width: 140px;
//     height: 33px;
//     border: unset;
//     border-radius: 10px;
//     font-size: 22px;
//     font-family: MicrosoftYaHei;
//     color: rgba(255, 255, 255, 0.8);
//     background-color: rgba(119, 128, 130, 1);
//   }
// }
// .el-message-box__btns button:nth-child(2) {
//   background-color: #02979b !important;
// }
//
</style>
<style lang="less" scoped>
.collectionBack {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%);
  width: 500px;
  height: 260px;
  color: #fff;
  border-radius: 14px;
  padding-top: 40px;
  box-sizing: border-box;
  background-color: rgba(1, 7, 17, 0.7);
  z-index: 999999999999999 !important;
  /deep/ .el-button {
    background: #02979b;
    color: #fff;
    border: 1px solid #02979b;
    width: 80px;
    height: 30px;
    border-radius: 10px;
  }
  /deep/ .el-radio__label {
    font-size: 16px;
  }
  /deep/ .el-radio {
    color: #fff;
  }
  ::v-deep .el-button {
    color: #fff !important;
  }
}

.Professional-container {
  position: absolute;
  top: 112px;
  right: 10px;
  height: calc(100% - 122px);
  width: 460px;
  padding: 15px;
  border: 1px solid #0d609c;
  background: rgba(1, 7, 17, 0.7);
  box-sizing: border-box;
  z-index: 10;

  .el-input {
    margin-bottom: 15px;

    ::v-deep .el-input__wrapper {
      background-color: rgba(0, 0, 0, 0.6);
    }
  }
  .card-container {
    .active-color {
      border: 3px solid rgba(2, 151, 155, 1) !important;
    }

    ::v-deep .el-card__header {
      border-bottom: unset;
    }

    .box-card {
      // height: 110px;
      // overflow: auto;
      margin-bottom: 10px;
      background-color: rgba(1, 7, 17, 0.6);
      border: unset;
      border-radius: 10px;
      cursor: pointer;

      .card-header {
        display: flex;
        justify-content: space-between;
        color: #fff;
      }

      ::v-deep .el-card__body {
        padding-top: 0;
      }

      .text {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 10px;
        padding: 5px 10px;
        border: 1px solid #797979;
        border-radius: 5px;
        color: #fff;
      }

      .active-FireCar {
        background-color: rgba(2, 151, 155, 0.4);
      }
    }

    .addFireCar-button {
      height: 38px;
      line-height: 38px;
      text-align: center;
      border: 1.5px dashed #797979;
      border-radius: 5px;
      box-sizing: border-box;
      cursor: pointer;
      color: #fff;

      i {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 5px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(@/assets/image/common/plus-icon.png);
      }
    }
  }
  /deep/ .el-message-box {
    /* border: 1px solid #0d609c; */
    font-size: 20px;
    background: rgba(1, 7, 17, 0.7);
  }
  /deep/ .el-message-box__content {
    font-size: 20px;
    color: #fff;
  }
  .card-footer {
    position: absolute;
    bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 430px;
    height: 40px;
    background-color: rgba(119, 128, 130, 0.8);
    border: 1.5px dashed #ccc;
    border-radius: 10px;
    box-sizing: border-box;
    cursor: pointer;

    i {
      width: 28px;
      height: 28px;
      margin-right: 8px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url(@/assets/image/common/plus-icon.png);
    }

    span {
      color: #fff;
      font-size: 18px;
      font-weight: 700;
    }
  }
}
.cartext {
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/ .el-button {
  width: 200px;
}
</style>
